<!DOCTYPE html>
<html>
<head>
    <TITLE>树</TITLE>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" href="css/zTreeStyle/zTreeStyle.css" type="text/css">
    <link rel="stylesheet" href="css/demo.css">
    <script src="js/jquery-1.4.4.min.js"></script>
    <script src="js/jquery.ztree.core.js"></script>
    <script src="js/jquery.ztree.excheck.js"></script>
    <script src="js/jquery.ztree.exedit.js"></script>
    <script src="js/jquery.ztree.exhide.js"></script>
</head>
<style>
    ul.ztree {
        margin-top: 10px;
        border: 1px solid #617775;
        background: #fff;
        width: 220px;
        height: 360px;
        overflow-y: scroll;
        overflow-x: auto;
    }
</style>
<body>
<h1>最简单的树 -- 简单 JSON 数据</h1>
<ul id="treeDemo" class="ztree"></ul>
</body>
</html>

<!--<script>-->

    <!--var setting = {-->
        <!--check: {-->
            <!--enable: true-->
        <!--},-->
        <!--data: {-->
            <!--simpleData: {-->
                <!--enable: true-->
            <!--}-->
        <!--}-->
    <!--};-->

    <!--// var zNodes =[-->
    <!--//     { id:1, pId:0, name:"随意勾选 1", open:true},-->
    <!--//     { id:11, pId:1, name:"随意勾选 1-1", open:true},-->
    <!--//     { id:111, pId:11, name:"随意勾选 1-1-1"},-->
    <!--//     { id:112, pId:11, name:"随意勾选 1-1-2"},-->
    <!--//     { id:12, pId:1, name:"随意勾选 1-2", open:true},-->
    <!--//     { id:121, pId:12, name:"随意勾选 1-2-1"},-->
    <!--//     { id:122, pId:12, name:"随意勾选 1-2-2"},-->
    <!--//     { id:2, pId:0, name:"随意勾选 2", checked:true, open:true},-->
    <!--//     { id:21, pId:2, name:"随意勾选 2-1"},-->
    <!--//     { id:22, pId:2, name:"随意勾选 2-2", open:true},-->
    <!--//     { id:221, pId:22, name:"随意勾选 2-2-1", checked:true},-->
    <!--//     { id:222, pId:22, name:"随意勾选 2-2-2"},-->
    <!--//     { id:23, pId:2, name:"随意勾选 2-3"}-->
    <!--// ];-->


    <!--var zNodes = [-->
        <!--{id: 1, pId: 0, name: "随意勾选 1", open: true},-->
        <!--{id: 11, pId: 1, name: "随意勾选 1-1", open: true},-->
        <!--{id: 111, pId: 11, name: "随意勾选 1-1-1"},-->
        <!--{id: 112, pId: 11, name: "随意勾选 1-1-2"},-->
        <!--{id: 12, pId: 1, name: "随意勾选 1-2", open: true},-->
        <!--{id: 121, pId: 12, name: "随意勾选 1-2-1"},-->
        <!--{id: 122, pId: 12, name: "随意勾选 1-2-2"},-->
        <!--{id: 2, pId: 0, name: "随意勾选 2"},-->
        <!--{id: 21, pId: 2, name: "随意勾选 2-1"},-->
        <!--{id: 22, pId: 2, name: "随意勾选 2-2"},-->
        <!--{id: 221, pId: 22, name: "随意勾选 2-2-1"},-->
        <!--{id: 222, pId: 22, name: "随意勾选 2-2-2"},-->
        <!--{id: 23, pId: 2, name: "随意勾选 2-3"}-->
    <!--];-->
    <!--var code;-->

    <!--function setCheck() {-->
        <!--var zTree = $.fn.zTree.getZTreeObj("treeDemo"),-->
            <!--py = $("#py").attr("checked") ? "p" : "",-->
            <!--sy = $("#sy").attr("checked") ? "s" : "",-->
            <!--pn = $("#pn").attr("checked") ? "p" : "",-->
            <!--sn = $("#sn").attr("checked") ? "s" : "",-->
            <!--type = {"Y": py + sy, "N": pn + sn};-->
        <!--zTree.setting.check.chkboxType = type;-->
        <!--showCode('setting.check.chkboxType = { "Y" : "' + type.Y + '", "N" : "' + type.N + '" };');-->
    <!--}-->

    <!--function showCode(str) {-->
        <!--if (!code) code = $("#code");-->
        <!--code.empty();-->
        <!--code.append("<li>" + str + "</li>");-->
    <!--}-->

    <!--$(document).ready(function () {-->
        <!--$.fn.zTree.init($("#treeDemo"), setting, zNodes);-->
        <!--setCheck();-->
        <!--$("#py").bind("change", setCheck);-->
        <!--$("#sy").bind("change", setCheck);-->
        <!--$("#pn").bind("change", setCheck);-->
        <!--$("#sn").bind("change", setCheck);-->
    <!--});-->
<!--</SCRIPT>-->
<SCRIPT type="text/javascript">
    var setting = {
        check: {
            enable: true
        },
        data: {
            simpleData: {
                enable: true
            }
        }
    };

    var zNodes =[
        { id:1, pId:0, name:"随意勾选 1", open:true},
        { id:11, pId:1, name:"随意勾选 1-1", open:true},
        { id:111, pId:11, name:"随意勾选 1-1-1"},
        { id:112, pId:11, name:"随意勾选 1-1-2"},
        { id:12, pId:1, name:"随意勾选 1-2", open:true},
        { id:121, pId:12, name:"随意勾选 1-2-1"},
        { id:122, pId:12, name:"随意勾选 1-2-2"},
        { id:2, pId:0, name:"随意勾选 2", checked:true, open:true},
        { id:21, pId:2, name:"随意勾选 2-1"},
        { id:22, pId:2, name:"随意勾选 2-2", open:true},
        { id:221, pId:22, name:"随意勾选 2-2-1", checked:true},
        { id:222, pId:22, name:"随意勾选 2-2-2"},
        { id:23, pId:2, name:"随意勾选 2-3"}
    ];

    var code;

    function setCheck() {
        var zTree = $.fn.zTree.getZTreeObj("treeDemo"),
            py = $("#py").attr("checked")? "p":"",
            sy = $("#sy").attr("checked")? "s":"",
            pn = $("#pn").attr("checked")? "p":"",
            sn = $("#sn").attr("checked")? "s":"",
            type = { "Y":py + sy, "N":pn + sn};
        zTree.setting.check.chkboxType = type;
        showCode('setting.check.chkboxType = { "Y" : "' + type.Y + '", "N" : "' + type.N + '" };');
    }
    function showCode(str) {
        if (!code) code = $("#code");
        code.empty();
        code.append("<li>"+str+"</li>");
    }

    $(document).ready(function(){
        $.fn.zTree.init($("#treeDemo"), setting, zNodes);
        setCheck();
        $("#py").bind("change", setCheck);
        $("#sy").bind("change", setCheck);
        $("#pn").bind("change", setCheck);
        $("#sn").bind("change", setCheck);
    });
</SCRIPT>
